<template>
    <div class="content">
        <div class="tb">
            <tr>
                <th>选择框</th>
                <th>编号</th>
                <th>品牌名称</th>
                <th>品牌价格</th>
                <th>品牌销量</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in brand" :key="item.id">
                <td> <input type="checkbox"></td>
                <td>{{ item.id }}</td>
                <td>{{ item.brandname }}</td>
                <td :class="{prices: item.price >=1000}">{{ item.price }}</td>
                <td>{{ item.sales }}</td>
                <td>
                    <button @click="delbtn(index)">删除</button>
                </td>
            </tr>
            <tr v-if="brand.length == 0">
                <td colspan="6" style="text-align: center;">没有数据了</td>
            </tr>
            <!-- 计算平均值和销量综合-->
            <tr>
                <td>平均价格</td>
                <td colspan="2">{{ avgprice }}</td>
                <td>销量总和:</td>
                <td colspan="2">{{ sumsales }}</td>
            </tr>
        </div>
        <div>
            品牌名称： <input type="text" v-model.trim="pname"> <br></br>
            <br></br>
            品牌价格： <input type="text" v-model.number="pprice">
        </div>
        <button @click.prevent="addbtn" style="margin-left: 50px; margin-top: 10px;">添加品牌</button>

    </div>
</template>

<script setup>
import { computed, ref } from 'vue';
const pname = ref('')
const pprice = ref(0)

const brand = ref([
    { id: 101, brandname: '华为', price: 1000, sales: 200 },
    { id: 102, brandname: 'oppo', price: 100, sales: 100 },
    { id: 103, brandname: 'xm', price: 999, sales: 300 },
    { id: 104, brandname: 'vivo', price: 996, sales: 200 },
    { id: 105, brandname: '三星', price: 1200, sales: 400 },

])
const delbtn = (index) => {
   console.log(index);
  brand.value.splice(index,1)

}
const addbtn = () => { 
    if (pname.value.trim().length ===0 || pprice.value <= 0) { 
        alert('请输入正确的数据');
        return
    }
    console.log(brand.value[brand.value.length - 1].id + 1);
    
    brand.value.push({
        id: brand.value[brand.value.length - 1].id + 1,
        brandname: pname.value,
        price: pprice.value,
        sales: Math.floor(Math.random() * 100)
    })
}
//求总和
const sumsales = computed(() => { 
    return brand.value.reduce((sum, item) => sum += item.sales , 0)
})

//求平均值
const avgprice = computed(() => { 
    let sum = 0
    //求总和
    brand.value.forEach(item => { 
        sum += item.price
        return sum
    })
    
     return (sum / brand.value.length).toFixed(2)
})
</script>

<style  scoped>
.content{
    border: 1px solid red;
    .tb{
        width: 500px;
        margin-top: 10px;
        /* border: 1px solid blue; */
        th{
            border: 1px solid green;
            padding-left: 15px;
            padding-right: 10px;
            
            /* text-align: center; */
        }
        td{
            border: 1px solid green;
            padding-left: 15px;
            padding-right: 10px;
          
        }
    }
}
.prices{
    color: red;
}
</style>